<template>
    <div class="employ">
        <template>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="部门列表" name="first">
                    <el-input placeholder="请输入内容" v-model="input1" class="input-with-select">
                        <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="餐厅名" value="1"></el-option>
                        <el-option label="订单号" value="2"></el-option>
                        <el-option label="用户电话" value="3"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="searchDepart">查询</el-button>
                    </el-input>
                    <el-button type="primary">创建部门</el-button>
                    <template>
                        <el-table
                        :data="tableData"
                        style="width: 100%;paddingTop:15px;">
                        <el-table-column
                            prop="date"
                            label="日期"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="地址">
                        </el-table-column>
                        <el-table-column
                            label="操作">
                            <el-button>编辑</el-button>
                            <el-button type="info">权限设置</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-table-column>
                        </el-table>
                    </template>

                </el-tab-pane>
                <el-tab-pane label="员工列表" name="second">
                    <el-input placeholder="请输入内容" v-model="input2" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="searchEmploy">查询</el-button>
                    </el-input>
                    <el-button type="primary">添加员工</el-button>
                    <template>
                        <el-table
                        :data="tableData"
                        style="width: 100%;paddingTop:15px;">
                        <el-table-column
                            prop="date"
                            label="日期"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="地址">
                        </el-table-column>
                        <el-table-column
                            label="操作">
                            <el-button>编辑</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-table-column>
                        </el-table>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'first',
        input1:"",
        input2:"",
        select:'',
        select2:"",
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
      };
    },
    methods: {
      handleClick(tab, event) {
        // console.log(tab, event);
      },
      searchDepart(){
        console.log(this.input1,'input',this.select,'select')
      },
      searchEmploy(){
        console.log(this.input2,'input',this.select2,'select')
      }
    }
  };
</script>

<style lang='scss'>
    .el-container{
        padding: 10px;
        .employ{
            width: 100%;
            height: 100%;
            .input-with-select{
                width: 50%;
                float: left;
            }
            a{
                color: rgb(51, 115, 243);
            }
        }
    }
    .el-button{
        float: left;
        margin-left: 20px;
    }
</style>